<template>
  <el-select
    :size="size"
    v-model="name"
    placeholder="请选择"
    style="width: 100%"
  >
    <el-option :value="choseDepart.label" style="height: auto; padding: 0">
      <el-tree
        :size="size"
        empty-text="暂无数据"
        ref="asyncTree"
        check-strictly
        highlight-current
        :expand-on-click-node="false"
        node-key="id"
        :props="treeDefaultProps.defaultProps"
        :load="loadNode"
        lazy
        @node-click="handleNodeClick"
      >
        <div class="custom-tree-node" slot-scope="{ node }">
          <span style="font-size: 14px; font-weight: normal">{{
            node.label
          }}</span>
        </div>
      </el-tree>
    </el-option>
  </el-select>
</template>

<script>
import orgAPI from "@apis/organize";
export default {
  props: {
    size: {
      type: String,
      default() {
        return "";
      },
    },
    orgname: String,
    chosePart: Function,
  },
  data() {
    return {
      name: this.orgname,
      data: [],
      choseDepart: { id: "", lebel: "" },
      treeDefaultProps: {
        defaultProps: {
          children: "children",
          label: "label",
        },
        defaultExpanded: [1],
      },
    };
  },
  computed: {},
  methods: {
    //树状图数据懒加载函数
    async loadNode(node, resolve) {
      if (node.level == 0) {
        await this.getOrgList(0);
        return resolve(this.data);
      } else {
        await this.getOrgList(node.data.id);
        return resolve(this.data);
      }
    },
    //获取树状图数据
    async getOrgList(val = 0) {
      this.data = [];
      let parmars = {
        pid: val,
        pageNo: 1,
        pageSize: 1000,
      };
      await orgAPI
        .getOrgList(parmars)
        .then((res) => {
          res.data.map((item) => {
            this.data.push({
              pid: item.pid,
              id: item.id,
              label: item.orgname ? item.orgname : "label" + item.id,
              children: [],
            });
          });
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    handleNodeClick(data, node, nodeSelf) {
      // console.log(data);
      this.choseDepart = { ...data };
      this.name = data.label;
      this.$emit("chosePart", data);
    },
  },
};
</script>

<style scoped>
</style>